<script>
/* eslint-disable no-unused-vars */
import FormCreate from '@form-create/element-ui'
import { createVNode, defineComponent } from 'vue'
import {
    ElRadioButton,
    ElRadioGroup,
    ElLink,
    ElIcon,
    ElButton,
    ElImage
} from 'element-plus/lib/index'
import { Edit, Delete, Upload, CloseBold } from '@element-plus/icons-vue'
import { openUpload } from '@/util/buttonUtil'
import axios from 'axios'

export default defineComponent({
    props: {
        // eslint-disable-next-line vue/require-default-prop
        modelValue: String,
        // eslint-disable-next-line vue/require-default-prop
        options: Array,
        // eslint-disable-next-line vue/require-default-prop
        resources: Object
    },
    emits: ['update:modelValue', 'changeFile'],
    data: function() {
        return {
            loading: false,
            notifys: {
                IMAGE: '支持PNG/JPGE/JPG',
                VIDEO: '支持MP4',
                AUDIO: '支持MP3'
            },
            acpect: {
                IMAGE: 'image/*',
                VIDEO: '.mp4,.MP4',
                AUDIO: '.mp3,.MP3'
            }
        }
    },
    computed: {
        val() {
            return this.modelValue
        }
    },
    methods: {
        async doUpload() {
            let res = await openUpload()
            this.loading = true
            // 上传
            let formData = new FormData()
            formData.append('file', res[0])
            let fileRes = await axios.post('/download/mon/upload', formData)
            // fileRes.data.data.path
            let emitVal = (this.val ? (this.val + ',') : '') + fileRes.data.data.path
            this.$emit('update:modelValue', emitVal)
            this.loading = false
        },
        removeIndex(index) {
            console.log(index)
            let list =  this.val.split(',')
            list.splice(index, 1)
            this.$emit('update:modelValue', list.join(','))
        }
        
    },
    render() {
        const props = {
            type: 'primary',
            icon: Upload,
            size: 'mini',
            onClick: this.doUpload,
            loading: this.loading,
            style: 'width:200px'
        }
        const spanProps = {
            href: this.val,
            style: 'font-size:12px;margin-left:10px;color:var(--el-color-primary)'
        }
        const preview = ElImage

        const list = this.val ? this.val.split(',') : []

        const preViewProps = {
            // src: this.val,
            'preview-src-list': list,
            'append-to-body': true,
            style: 'width:100px;height:100px;margin-top:20px;margin-right:20px;position: relative;'
        }
        return [
            createVNode(
                'div',
                {
                    style: 'display:flex;flex-direction: column;'
                },
                [
                    createVNode(
                        ElButton,
                        props,
                        this.val ? '继续上传' : '点击上传'
                    ),
                    this.val
                        ? createVNode(
                            'div',
                            {
                                style: 'display:flex;'
                            }, 
                            list.map((it, index) =>
                                createVNode('div', { style: 'position: relative;' }, [createVNode(ElImage, { ...preViewProps, src: it }), createVNode(CloseBold, {
                                    style: 'position: absolute;z-index:20000;right:10px;width:20px;top:-80px;cursor: pointer;',
                                    onClick: () => this.removeIndex(index)
                                }) ])
                            )
                        )
                        : createVNode('span', preViewProps)
                ]
            )
            // createVNode(preview, preViewProps),
        ]
    }
})
</script>
